.container{
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

li>a{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.header{
	height: 12vw;
	border: 1px solid #b0b0b0;
	flex-shrink: 0;
}

.content{
	flex-grow: 1;
	display: flex;
	flex-shrink: 1;
	overflow: hidden;
}
.left{
	width: 22vw;
	overflow: auto;
	flex-shrink: 0;
}

.left::-webkit-scrollbar{
	width: 0;
}
.right::-webkit-scrollbar{
	width: 0;
}

ul.list-main{
	
}

ul.list-main li{
	height: 12vw;
	display: flex;
	align-items: center;
}

ul.list-main span{
	height: 6.66vw;
	line-height: 6.66vw;
	flex-grow: 1;
	text-align: center;
	font-size: 3.7vw;
	border-left: 6px solid transparent;
}

ul.list-main li.active span{
	color: red;
	border-left: 6px solid red;
}

.right{
	border-left: 1px solid #b0b0b0;
	flex-grow: 1;
	overflow: auto;
	padding: 4vw;
}

.right img.avatar{
	width: 100%;
	border-radius: 2vw;
}

ul.list-sub{
	display: flex;
	flex-wrap: wrap;
}

ul.list-sub li{
	/* display: flex; */
	width: 33.33%;
}

.footer{
	height: 14vw;
	border: 1px solid #b0b0b0;
}
